import React, { Component } from 'react';
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { notEmpty } from '@assets/js/formMixin';  // 自定义表单工具
import './Login.scss'

class Login extends Component {

  constructor(props) {
    super(props);

    this.state = {
      formInitialValues: {
        remember: true,
      }
    }

    this.formFinish = this.formFinish.bind(this);
  }

  formFinish(formData) {
    console.log('this is form data:', formData)
  }


  render() {

    const element = (
      <div className="login-wrapper">
        <Form
          name="login_form"
          className="login-form"
          initialValues={this.state.formInitialValues}
          onFinish={this.formFinish}
        >
          <Form.Item
            name="username"
            rules={[
              notEmpty('用户名')
            ]}
          >
            <Input  placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              notEmpty('密码')
            ]}
          >
            <Input.Password placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              Forgot password
        </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block className="login-form-button">
              Log in
        </Button>
        Or <a href="">register now!</a>
          </Form.Item>
        </Form>

      </div>
    );
    return element;
  }
}



export default Login;